<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="static/plugins/picker/iosSelect.css">
    <script type="text/javascript" src="static/plugins/picker/iosSelect.js"></script>
</head>

<body>

    <div id="showDom">cshowDom </div>
    <div id="valDom">valDom</div>

    <script>

        var data = [{ 'id': '10001', 'value': 'ETH' }, { 'id': '10002', 'value': 'BCI' }, { 'id': '10002', 'value': 'CAR' }, { 'id': '10001', 'value': 'ETH' }, { 'id': '10002', 'value': 'BCI' }, { 'id': '10002', 'value': 'CAR' }];
        var showDom = document.querySelector('#showDom');// 绑定一个触发元素
        var valDom = document.querySelector('#valDom');  // 绑定一个存储结果的元素
        showDom.addEventListener('click', function () {  // 添加监听事件
            var val = showDom.dataset['id'];             // 获取元素的data-id属性值
            var title = showDom.dataset['value'];        // 获取元素的data-value属性值
            // 实例化组件
            var example = new IosSelect(1,               // 第一个参数为级联层级，演示为1
                [data],                             // 演示数据
                {
                    container: '.container',             // 容器class
                    title: '选择币种',                    // 标题
                    itemHeight: 50,                      // 每个元素的高度
                    itemShowCount: 3,                    // 每一列显示元素个数，超出将隐藏
                    oneLevelId: val,                     // 第一级默认值
                    callback: function (selectOneObj) {  // 用户确认选择后的回调函数
                        valDom.value = selectOneObj.id;
                        showDom.innerHTML = selectOneObj.value;
                        showDom.dataset['id'] = selectOneObj.id;
                        showDom.dataset['value'] = selectOneObj.value;
                    }
                });
        });
    </script>

</body>

</html>